<template>
  <BubbleMenu v-if="editor" :editor="editor" class="flex flex-wrap text-gray-700 dark:text-gray-100"
    :tippyOptions="{ maxWidth: 'none', theme: 'light', arrow: false }">
    <Dropdown class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      :options="aiOptions">
      <template #title>
        <RemixIcon class="mr-1 text-purple-500 dark:text-purple-300" name="robot-2-line"></RemixIcon>
        <span class="text-purple-500 dark:text-purple-300">{{ i18n.t('aiTools') }}</span>
      </template>
      <template #item="{ item }">
        <div
          class="h-8 leading-8 px-2 rounded mb-1 hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer text-gray-700 dark:text-gray-200"
          @click="handleAIWrite(item.value)"
          :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('heading', { level: item.level }) }">
          <RemixIcon :name="item.icon" />
          <span class="ml-2">{{ item.label }}</span>
        </div>
      </template>
    </Dropdown>
    <!-- <div class="my-2 border-l border-gray-300"></div> -->
    <Dropdown class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      :options="headingOptions">
      <template #title>
        <RemixIcon name="heading"></RemixIcon>
      </template>
      <template #item="{ item }">
        <div
          class="h-8 leading-8 px-2 rounded mb-1 hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer text-gray-700 dark:text-gray-200"
          @click="editor.chain().focus().toggleHeading({ level: item.level }).run()"
          :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('heading', { level: item.level }) }">
          <RemixIcon :name="item.icon" />
          <span class="ml-2">{{ item.label }}</span>
        </div>
      </template>
    </Dropdown>
    <Dropdown class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      :options="listOptions">
      <template #title>
        <RemixIcon name="list-check"></RemixIcon>
      </template>
      <template #item="{ item }">
        <div
          class="h-8 leading-8 px-2 rounded mb-1 hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer text-gray-700 dark:text-gray-200"
          @click="editor.chain().focus()[item.command]().run()"
          :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive(item.value) }">
          <RemixIcon :name="item.icon" />
          <span class="ml-2">{{ item.label }}</span>
        </div>
      </template>
    </Dropdown>
    <div class="my-2 border-l border-gray-300"></div>
    <Dropdown class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      :options="alignOptions">
      <template #title>
        <RemixIcon name="align-left"></RemixIcon>
      </template>
      <template #item="{ item }">
        <div
          class="h-8 leading-8 px-2 rounded mb-1 hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer text-gray-700 dark:text-gray-200"
          @click="editor.chain().focus().setTextAlign(item.value).run()"
          :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive({ textAlign: item.value }) }">
          <RemixIcon :name="item.icon" />
          <span class="ml-2">{{ item.label }}</span>
        </div>
      </template>
    </Dropdown>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().toggleBold().run()"
      :disabled="editor.can && !editor.can().chain().focus().toggleBold().run()"
      :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('bold') }">
      <RemixIcon name="bold" />
    </div>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().toggleItalic().run()"
      :disabled="editor.can && !editor.can().chain().focus().toggleItalic().run()"
      :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('italic') }">
      <RemixIcon name="italic" />
    </div>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().toggleUnderline().run()"
      :disabled="editor.can && !editor.can().chain().focus().toggleUnderline().run()"
      :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('underline') }">
      <RemixIcon name="underline" />
    </div>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().toggleStrike().run()"
      :disabled="editor.can && !editor.can().chain().focus().toggleStrike().run()"
      :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('strike') }">
      <RemixIcon name="strikethrough" />
    </div>
    <Tippy ref="linkDropdown" trigger="click" placement="bottom" :offset="[0, 10]" animation="scale" :interactive="true"
      :appendTo="appendToBody" :onShow="setLinkShow" :onHide="setLinkHide" maxWidth="none" theme="light">
      <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
        :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('link') }">
        <RemixIcon name="link" />
      </div>
      <template #content>
        <div class="flex flex-row">
          <label for="link" class="mr-2">
            <input type="text" id="link" v-model="link" class="p-2 rounded-lg" placeholder="https://" />
          </label>
          <button class="w-full px-2 my-1 rounded-lg bg-purple-500 text-white" @click="setLink">{{ i18n.t('setting') }}</button>
        </div>
      </template>
    </Tippy>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().setParagraph().run()"
      :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('paragraph') }">
      <RemixIcon name="paragraph" />
    </div>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().toggleCode().run()"
      :disabled="editor.can && !editor.can().chain().focus().toggleCode().run()"
      :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('code') }">
      <RemixIcon name="code-view" />
    </div>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().toggleCodeBlock().run()"
      :class="{ 'bg-neutral-200 dark:bg-neutral-600': editor.isActive && editor.isActive('codeBlock') }">
      <RemixIcon name="code-block" />
    </div>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().toggleBlockquote().run()">
      <RemixIcon name="quote-text" />
    </div>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().setHorizontalRule().run()">
      <RemixIcon name="separator" />
    </div>
    <div class="mx-1 px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      @click="editor.chain().focus().unsetAllMarks().run()">
      <RemixIcon name="format-clear" />
    </div>
  </BubbleMenu>
</template>
<script setup>
import { ref } from 'vue'
import RemixIcon from './RemixIcon.vue'
import { BubbleMenu } from '@tiptap/vue-3';
import Dropdown from './Dropdown.vue'
import {Tippy} from 'vue-tippy'
import i18n from '../i18n';
const appendToBody = () => document.body;
const props = defineProps({
  editor: {
    type: Object,
    default: null
  }
})
const link = ref('');
const linkDropdown = ref();
const aiOptions = [{
  value: 'continuation',
  label: i18n.t('continuation'),
  icon: 'edit-2-line'
}, {
  value: 'polishing',
  label: i18n.t('polishing'),
  icon: 'magic-line'
}, {
  value: 'simplify',
  label: i18n.t('simplify'),
  icon: 'edit-circle-line'
},
{
  value: 'summarize',
  label: i18n.t('summarize'),
  icon: 'more-line'
},
{
  value: 'makeLonger',
  label: i18n.t('makeLonger'),
  icon: 'expand-right-line'
},
{
  value: 'makeShorter',
  label: i18n.t('makeShorter'),
  icon: 'expand-left-line'
},
{
  value: 'translate',
  label: i18n.t('translate'),
  icon: 'translate'
}];

const headingOptions = [{
  value: 'heading1',
  label: i18n.t('h1'),
  level: 1,
  icon: 'h-1'
}, {
  value: 'heading2',
  label: i18n.t('h2'),
  level: 2,
  icon: 'h-2'
}, {
  value: 'heading3',
  label: i18n.t('h3'),
  level: 3,
  icon: 'h-3'
}, {
  value: 'heading4',
  label: i18n.t('h4'),
  level: 4,
  icon: 'h-4'
}, {
  value: 'heading5',
  label: i18n.t('h5'),
  level: 5,
  icon: 'h-5'
}, {
  value: 'heading6',
  label: i18n.t('h6'),
  level: 6,
  icon: 'h-6'
}];
const listOptions = [{
  value: 'bulletList',
  label: i18n.t('bulletList'),
  icon: 'list-unordered',
  command: 'toggleBulletList'
}, {
  value: 'orderedList',
  label: i18n.t('orderedList'),
  icon: 'list-ordered',
  command: 'toggleOrderedList'
}, {
  value: 'taskList',
  label: i18n.t('task'),
  icon: 'list-check-3',
  command: 'toggleTaskList'
}];
const alignOptions = [{
  value: 'left',
  label: i18n.t('alignLeft'),
  icon: 'align-left'
}, {
  value: 'center',
  label: i18n.t('alignCenter'),
  icon: 'align-center'
}, {
  value: 'right',
  label: i18n.t('alignRight'),
  icon: 'align-right'
}, {
  value: 'justify',
  label: i18n.t('alignJustify'),
  icon: 'align-justify'
}];
const setLinkShow = () => {
  let linkStr = props.editor.getAttributes('link').href;
  link.value = linkStr;
  return true;
};
const setLinkHide = () => {
  return true;
}
const setLink = () => {
  let url = link.value;
  // empty
  if (!url) {
    props.editor
      .chain()
      .focus()
      .extendMarkRange('link')
      .unsetLink()
      .run()
  } else {
    // update link
    props.editor
      .chain()
      .focus()
      .extendMarkRange('link')
      .setLink({ href: url })
      .run()
  }
  link.value = '';
  linkDropdown?.value?.hide();
}
const handleAIWrite = (key) => {
  let prompt = '';
  switch (key) {
    case 'simplify':
      prompt = '将以下文本简化为更易懂的表达方式，尽量使用简单的词汇和短句，同时保持原意不变。'
      break;
    case 'translate':
      prompt = '将以下文本从[源语言]翻译成[目标语言]。'
      break;
    case 'summarize':
      prompt = '阅读以下文章，并提供一个简短的摘要。'
      break;
    case 'shorter':
      prompt = '使用更简洁的语言或表达方式来缩短这段文本。'
      break;
    case 'longer':
      prompt = '使用更多的细节或例证来扩写这段文本。'
      break;
    case 'complete':
      prompt = '根据以下提示或关键词，生成一段新的文本。'
      break;
    case 'polishing':
      prompt = '润色这段文本，使其更加专业。'
      break;
    case 'continuation':
      prompt = '继续这段文本，添加更多细节或例证。'
    default: break
  }
  let { doc, selection } = props.editor?.view?.state || {};
  let { from, to } = selection || {};
  let question = doc.textBetween(from, to, '\n');
  props.editor.chain().focus().setAiWrite({ question, prompt }).run();
}
</script>


<style lang='scss' scoped></style>